<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./public/css/index.css">
	<link rel="stylesheet" href="./public/css/aos.css">
	<link rel="stylesheet" href="./public/css/swiper-bundle.min.css">
	<link rel="stylesheet" href="./public/css/swiper-bundle.css">
</head>

<body>
	<div id="header"></div>
	<div id="right"></div>
	<div id="container">
		<div class="swiper-container banner-swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide banner">
					<img class="image"
						src="https://img.tongmen.cdn.dgyunju.cn/三路模块电源-1695868243.jpg?imageView2/0/format/webp/q/50/interlace/1"
						alt="">
				</div>
				<div class="swiper-slide banner">
					<img class="image"
						src="https://img.tongmen.cdn.dgyunju.cn/三路模块电源-1695868243.jpg?imageView2/0/format/webp/q/50/interlace/1"
						alt="">
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div id="app" class="content">
			<div data-aos="fade-left" id="category">
				<div class="category-container">
					<!-- PC端轮播 -->
					<div class="pc-carousel">
						<button class="navigation navigation-prev"></button>
						<button class="navigation navigation-next"></button>

						<div class="swiper">
							<div class="swiper-wrapper">
								<!-- 动态生成轮播项 -->
								<div class="swiper-slide">
									<a href="#" class="category-item">
										<img class="category-image"
											src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
											alt="xxxx" loading="lazy">
										<p class="category-title">xxxx</p>
									</a>
								</div>
								<div class="swiper-slide">
									<a href="#" class="category-item">
										<img class="category-image"
											src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
											alt="xxxx" loading="lazy">
										<p class="category-title">xxxx</p>
									</a>
								</div>
								<div class="swiper-slide">
									<a href="#" class="category-item">
										<img class="category-image"
											src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
											alt="xxxx" loading="lazy">
										<p class="category-title">xxxx</p>
									</a>
								</div>
								<div class="swiper-slide">
									<a href="#" class="category-item">
										<img class="category-image"
											src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
											alt="xxxx" loading="lazy">
										<p class="category-title">xxxx</p>
									</a>
								</div>
								<div class="swiper-slide">
									<a href="#" class="category-item">
										<img class="category-image"
											src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
											alt="xxxx" loading="lazy">
										<p class="category-title">xxxx</p>
									</a>
								</div>
								<div class="swiper-slide">
									<a href="#" class="category-item">
										<img class="category-image"
											src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
											alt="xxxx" loading="lazy">
										<p class="category-title">xxxx</p>
									</a>
								</div>

							</div>
						</div>
					</div>

					<!-- 移动端flex布局 -->
					<div class="mobile-flex">
						<!-- 动态生成flex项 -->
						<div class="category-item">
							<img class="category-image"
								src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
								alt="1111" loading="lazy">
							<p class="category-title">11111</p>
						</div>
						<div class="category-item">
							<img class="category-image"
								src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
								alt="1111" loading="lazy">
							<p class="category-title">11111</p>
						</div>
						<div class="category-item">
							<img class="category-image"
								src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
								alt="1111" loading="lazy">
							<p class="category-title">11111</p>
						</div>
						<div class="category-item">
							<img class="category-image"
								src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
								alt="1111" loading="lazy">
							<p class="category-title">11111</p>
						</div>
						<div class="category-item">
							<img class="category-image"
								src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
								alt="1111" loading="lazy">
							<p class="category-title">11111</p>
						</div>
						<div class="category-item">
							<img class="category-image"
								src="http://img.tongmen.cdn.dgyunju.cn/电源线框-03-1678085471.svg?imageview2/format/webp/interlace/1"
								alt="1111" loading="lazy">
							<p class="category-title">11111</p>
						</div>

					</div>
				</div>
			</div>
			<div data-aos="fade-left" id="news">
				<!-- <div class="news_title">PRODUCT CENTER</div> -->
				<div class="product-container">
					<div class="product-title">
						<h2>产品中心</h2>
						<span>Product Center</span>
						<div class="line"></div>
					</div>

					<div class="tab-container" id="tabContainer">
						<!-- 选项卡将通过JS动态生成 -->
						<div class="product-tab-list active" data-index="0">
							分类1
						</div>
						<div class="product-tab-list" data-index="1">
							分类1
						</div>
						<div class="product-tab-list" data-index="2">
							分类2
						</div>
						<div class="product-tab-list" data-index="2">
							分类2
						</div>
					</div>

					<!-- PC端横向滚动产品列表 -->
					<div class="pc-product-list" id="pcProductList">
						<!-- 产品将通过JS动态生成 -->
						<a href="./product_id.html" class="pc-product-item">
							<img class="pc-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="111"
								loading="lazy">
							<p class="pc-product-name">xxxx</p>
							<p class="pc-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="pc-product-item">
							<img class="pc-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="111"
								loading="lazy">
							<p class="pc-product-name">xxxx</p>
							<p class="pc-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="pc-product-item">
							<img class="pc-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="111"
								loading="lazy">
							<p class="pc-product-name">xxxx</p>
							<p class="pc-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="pc-product-item">
							<img class="pc-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="111"
								loading="lazy">
							<p class="pc-product-name">xxxx</p>
							<p class="pc-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="pc-product-item">
							<img class="pc-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="111"
								loading="lazy">
							<p class="pc-product-name">xxxx</p>
							<p class="pc-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="pc-product-item">
							<img class="pc-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="111"
								loading="lazy">
							<p class="pc-product-name">xxxx</p>
							<p class="pc-product-desc">1111</p>
						</a>
					</div>

					<!-- 移动端flex两列产品列表 -->
					<div class="mobile-product-list" id="mobileProductList">
						<!-- 产品将通过JS动态生成 -->
						<a href="./product_id.html" class="mobile-product-item">
							<img class="mobile-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="1111"
								loading="lazy">
							<p class="mobile-product-name">xxx</p>
							<p class="mobile-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="mobile-product-item">
							<img class="mobile-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="1111"
								loading="lazy">
							<p class="mobile-product-name">xxx</p>
							<p class="mobile-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="mobile-product-item">
							<img class="mobile-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="1111"
								loading="lazy">
							<p class="mobile-product-name">xxx</p>
							<p class="mobile-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="mobile-product-item">
							<img class="mobile-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="1111"
								loading="lazy">
							<p class="mobile-product-name">xxx</p>
							<p class="mobile-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="mobile-product-item">
							<img class="mobile-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="1111"
								loading="lazy">
							<p class="mobile-product-name">xxx</p>
							<p class="mobile-product-desc">1111</p>
						</a>
						<a href="./product_id.html" class="mobile-product-item">
							<img class="mobile-product-image" src="https://img.tongmen.cdn.dgyunju.cn/1-1731374909.jpg" alt="1111"
								loading="lazy">
							<p class="mobile-product-name">xxx</p>
							<p class="mobile-product-desc">1111</p>
						</a>

					</div>

					<!-- 空状态 -->
					<div class="empty-state" id="emptyState" style="display: none;">
						暂无相关的产品列表~
					</div>
				</div>
			</div>
			<div data-aos="fade-left" id="about">
				<!-- <div class="about_title">corporate culture</div> -->
				<div class="about-container">
					<!-- PC端布局 -->
					<div class="pc-about">
						<div class="about-sidebar">
							<div class="about-title">
								<h2>企业文化</h2>
								<span>corporate culture</span>
								<div class="line"></div>
							</div>

							<div class="about-tabs" id="pcTabs">
								<!-- 选项卡将通过JS动态生成 -->
								<div class="tab-list active" data-key="culture">
									品牌故事
								</div>
								<div class="tab-list " data-key="introduction">
									公司简介
								</div>
								<div class="tab-list " data-key="idea">
									企业理念
								</div>
								<div class="tab-list " data-key="honor">
									获得荣誉
								</div>
							</div>
						</div>

						<div class="about-content" id="pcContent">
							<!-- 内容将通过JS动态生成 -->
							<div class="content-left">
								<img class="about-cover" src="https://img.tongmen.cdn.dgyunju.cn/home-about.jpg" alt="企业文化"
									loading="lazy">
							</div>
							<div class="content-right">
								<div class="about-text">
									<p>我们的企业文化强调创新、协作和持续发展...</p>
								</div>
								<div class="about-info">
									<div class="info-item">
										<i class="icon fi fi-user-group"></i>
										<div class="info-value">25<span class="unit">人</span></div>
										<div class="info-label">研发人员</div>
									</div>
									<div class="info-item">
										<i class="icon fi fi-company"></i>
										<div class="info-value">6000<span class="unit">㎡</span></div>
										<div class="info-label">厂房面积</div>
									</div>
									<div class="info-item">
										<i class="icon fi fi-line"></i>
										<div class="info-value">10<span class="unit">条</span></div>
										<div class="info-label">现有生产线数量</div>
									</div>
									<div class="info-item">
										<i class="icon fi fi-box"></i>
										<div class="info-value">10000<span class="unit">台</span></div>
										<div class="info-label">电源设备月产能</div>
									</div>
								</div>
							</div>
							<div class="about-honor">
								<div class="swiper honor-swiper">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<div class="honor-slide">
												<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
													alt="最佳创新奖" loading="lazy">
											</div>
										</div>
										<div class="swiper-slide">
											<div class="honor-slide">
												<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
													alt="质量认证" loading="lazy">
											</div>
										</div>
										<div class="swiper-slide">
											<div class="honor-slide">
												<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
													alt="行业标杆" loading="lazy">
											</div>
										</div>
										<div class="swiper-slide">
											<div class="honor-slide">
												<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
													alt="行业标杆" loading="lazy">
											</div>
										</div>
										<div class="swiper-slide">
											<div class="honor-slide">
												<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
													alt="行业标杆" loading="lazy">
											</div>
										</div>
									</div>
								</div>
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>

					<!-- 移动端布局 -->
					<div class="mobile-about">
						<div class="mobile-title">
							<h2>企业文化</h2>
							<span>corporate culture</span>
						</div>

						<div class="mobile-tabs" id="mobileTabs">
							<!-- 选项卡将通过JS动态生成 -->
							<div class="tab-list mobile-tab active" data-key="culture">
								企业文化
							</div>
							<div class="tab-list mobile-tab " data-key="introduction">
								公司简介
							</div>
							<div class="tab-list mobile-tab " data-key="idea">
								经营理念
							</div>
							<div class="tab-list mobile-tab " data-key="honor">
								荣誉资质
							</div>
						</div>

						<div class="mobile-content" id="mobileContent">
							<!-- 内容将通过JS动态生成 -->
							<div class="mobile-content active">
								<img class="mobile-cover" src="https://img.tongmen.cdn.dgyunju.cn/home-about.jpg" alt="企业文化"
									loading="lazy">
								<div class="about-text">
									<p>我们的企业文化强调创新、协作和持续发展...</p>
								</div>
								<div class="mobile-info">
									<div class="mobile-info-item">
										<i class="icon fi fi-user-group"></i>
										<div class="info-value">25<span class="unit">人</span></div>
										<div class="info-label">研发人员</div>
									</div>
									<div class="mobile-info-item">
										<i class="icon fi fi-company"></i>
										<div class="info-value">6000<span class="unit">㎡</span></div>
										<div class="info-label">厂房面积</div>
									</div>
									<div class="mobile-info-item">
										<i class="icon fi fi-line"></i>
										<div class="info-value">10<span class="unit">条</span></div>
										<div class="info-label">现有生产线数量</div>
									</div>
									<div class="mobile-info-item">
										<i class="icon fi fi-box"></i>
										<div class="info-value">10000<span class="unit">台</span></div>
										<div class="info-label">电源设备月产能</div>
									</div>
								</div>
								<div class="mobile-honor">
									<div class="mobile-honor-item">
										<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
											alt="111" loading="lazy">
									</div>
									<div class="mobile-honor-item">
										<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
											alt="111" loading="lazy">
									</div>
									<div class="mobile-honor-item">
										<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
											alt="111" loading="lazy">
									</div>
									<div class="mobile-honor-item">
										<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
											alt="111" loading="lazy">
									</div>
									<div class="mobile-honor-item">
										<img class="honor-image" src="http://img.tongmen.cdn.dgyunju.cn/DSC05054(小)-1677915532.jpg"
											alt="111" loading="lazy">
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="footer"></div>
	<script src="./public/js/jquery.min.js"></script>
	<script src="./public/js/swiper-bundle.js"> </script>
	<script src="./public/js/swiper-bundle.min.js"></script>
	<script src="./public/js/swiper-bundle.min.js.map"></script>
	<script src="./public/js/common.js"></script>
	<script src="./public/js/aos.js"></script>
	<script src="./public/js/index.js"></script>
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			document.body.addEventListener('touchmove', function (e) {
				if (e.touches.length > 1) {
					e.preventDefault();
				}
			}, { passive: false });
		});
	</script>
</body>

</html>